<template>
  <view class="avatar">
    <view v-if="urls && urls.length" class="avatar-group">
      <view v-for="(item, index) in urls.slice(0, maxCount)" :key="index" class="single"
        :style="{ height: size + 'rpx', width: size + 'rpx' }">
        <image :src="item" :width="size" :height="size" style="border-radius: 50%"></image>
      </view>
    </view>
    <view v-else>
      <view v-if="text">
      </view>
      <view v-else>
        <image @error="errorImage" :src="imgSrc" :width="size" :height="size" :style="{
          borderRadius:
            shape == 'circle' ? '0%' : shape == 'square' ? '50%' : '0%',
        }"></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    // 传入的图片路径
    src: {
      type: String,
      default: "",
    },
    // 用文字替代图片，级别优先于src
    text: {
      type: String,
      default: "",
    },
    // 头像尺寸
    size: {
      type: Number,
      default: 50,
    },
    // 头像形状
    shape: {
      type: String,
      default: "circle",
    },
    // 头像图片组
    urls: {
      type: Array,
      default: () => [],
    },
    // 最多展示的头像数量
    maxCount: {
      type: Number,
      default: 2,
    },
  },
  data() {
    return {
      imgSrc: this.src,
    };
  },

  methods: {
    errorImage() {
      this.imgSrc = require("./icon_default_avatar.png");
    },
  },
};
</script>

<style lang="scss" scoped>
.avatar-group {
  display: flex;
  align-items: center;

  .single:nth-child(n + 2) {
    margin-left: -15rpx;
  }

  .single {
    position: relative;
    overflow: hidden;

    image {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .more {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 99;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: translate(-50%, -50%);
      width: 100%;
      height: 100%;
      color: #fff;
      font-size: 60px;
      background: rgba($color: #000000, $alpha: 0.5);
      border-radius: 50%;
    }
  }
}

.text {
  width: 60px;
  height: 60px;
  clip-path: circle(45%);
  box-sizing: border-box;
  padding: 35px;
  background: #328cff;
  color: #fff;
  font-size: 60px;
}
</style>
